<template>
  <div class="department">
    <div class="operation-btn">
      <a-button @click="addHandle">新建部门</a-button>
    </div>
    <vxe-table border show-overflow="title" height="400" :data="tableData" :scroll-y="{ enabled: true, gt: 50 }">
      <vxe-column field="name" title="部门名称"></vxe-column>
      <vxe-column field="action" title="操作">
        <template #default="{ row }">
          <a-button type="link" @click="editHandle(row)">编辑</a-button>
          <a-button type="link" danger @click="deleteHandle(row)">删除</a-button>
        </template>
      </vxe-column>
    </vxe-table>
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="true" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import AddDepartment from "../addDepartment/index.vue";
export default {
  components: {
    AddDepartment
  }
};
</script>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getDepartmentApi } from "@/api/client/configCenter/accountManagement";
import ModalHook from "@/hook/modalHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);
const { visible } = toRefs(props);
const { tableData, dialogOpts, loading } = InitHook();
const { dialogSubmitHandle } = ModalHook({
  dialogOpts: dialogOpts,
  callBack: () => init()
});
const { addHandle, deleteHandle, editHandle } = OperationHook({ dialogOpts });
const init = () => {
  loading.value = true;
  return getDepartmentApi({ pageNum: 1, pageSize: 99999 })
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data.records || [];
      }
    })
    .finally(() => (loading.value = false));
};
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    }
  }
);
</script>
<style lang="stylus" scoped>
.department{
  .operation-btn{
    padding-bottom: 12px;
    text-align: right;
  }
}
</style>
